<template>
  <div ref="myDiv" class="chart" />
</template>

<script>
import * as Echarts from "echarts";
export default {
  name: "Zhexian",
  mounted() {
    this.echarts = Echarts.init(this.$refs.myDiv);
    this.echarts.setOption({
      title: {
        //text: "Stacked Line",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          //显示x轴和y轴信息
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        //data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        //textStyle: {
        //color: "#4c9bfd", // 图例文字颜色
        //},
        //right: "10%", // 距离右边10%
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        //show: true, // 显示边框
        //borderColor: "#012f4a", // 边框颜色
        containLabel: true, // 包含刻度文字在内
      },

      xAxis: {
        boundaryGap: false, // 不留白，从原点开始
        type: "category",
        data: [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat",
          "Sun",
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
          "Sat",
          "Sun",
        ],
        axisTick: {
          show: false, // 去除刻度线
        },
        axisLabel: {
          color: "#4c9bfd", // 文本颜色
        },
        axisLine: {
          //show: false, // 去除轴线
          lineStyle: {
            color: "rgba(0, 138, 205, 1)",
            // width:8,  x轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          },
        },
        // boundaryGap: false, // 去除轴内间距
      },
      yAxis: {
        type: "value",
        min: 0, // 配置 Y 轴刻度最小值
        max: 200,
        // axisTick: {
        //   show: false, // 去除刻度
        // },
        // axisLine: {
        //   show: false, // 去除轴线
        // },
        // axisLabel: {
        //   color: "#4c9bfd", // 文字颜色
        // },
        // splitLine: {
        //   //   lineStyle: {
        //   //     color: "#012f4a", // 分割线颜色
        //   //   },
        // },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(0, 138, 205, 1)",
            width: 2,
          },
        },
      },
      color: ["#ff005a", "#3888fa"],
      series: [
        {
          name: "expected",
          data: [
            100, 120, 161, 134, 105, 160, 165, 100, 120, 161, 134, 105, 160,
            165,
          ],
          type: "line",
          // 折线修饰为圆滑
          smooth: true,
        },
        {
          name: "actual",
          data: [
            120, 82, 91, 154, 162, 140, 15, 120, 82, 91, 154, 162, 140, 145,
          ],
          type: "line",
          smooth: true,
          areaStyle: {
            color: "rgba(0, 138, 205, 0.1)",
          },
        },
      ],
    });
  },
};
</script>

<style>
.sales-card .chart {
  height: 300px;
  width: 1100px !important;
}
</style>